<template>
    <div id="teacher">
        <transition name="fade">
            <div v-if="showC" class="teamUpConfirm">
                <div class="teamUpConfirmContainer">
                    <div style="padding:2vw 1vw 1.5vw 1.5vw;color:#3d3d3d;font-size:1.3vw">
                        该操作将<span style="color:red">删除</span>班级团队的数据！您确认吗？
                    </div>
                    <div style="text-align:right;padding:0 2vw 1vw 0">
                        <el-button size="mini" type="text" @click="showC=!showC">取消</el-button>
                        <el-button type="primary" size="mini" @click="unShowTeam">确定</el-button>
                    </div>
                </div>
            </div>
        </transition>

        <div class="container" >
            <div  v-bind:class="{aShow: showA==0}">
                <addClass v-bind:message2="showA" v-if="this.courseMess[0]" :courseMess="courseMess"  v-on:listenToChildEvent2="showMsgFromChild2" v-on:listen = "listen" v-on:delete_="delete_"></addClass>
            </div>
            <div  v-bind:class="{pShow: showP==0}">
                <publish ref="sspp" v-bind:message="showP" v-if="this.publishMess[0]"  :publishMess="publishMess" v-on:listenToChildEvent="showMsgFromChild"></publish>
            </div>
            <el-row class="lmr">
                <!--左栏-->
                <el-col :span="5" class="l">
                    <el-row class="headNInfo"><!--头像和简介-->
                        <el-col class="head" :span="7"><!--老师头像-->
                            <img>
                        </el-col>
                        <el-col class="info" :span="17"><!--老师简介-->
                           {{teacherName}} 您好！
                           <br><p style="font-size: 12px; color: #FFFFFF;" @click="logout">注销</p>
                        </el-col>
                    </el-row>

                     <div style="border-top:solid 2px #494949;border-bottom:solid 2px #494949;font-size:1.5vw;height:2.5vw"><!--外边框--><!--外边框-->
                    <el-row class="classTitle"><!--班级编号和名称-->
                        <el-col class="num" :span="7">编号</el-col>
                        <el-col class="name" :span="12">名称</el-col>
                    </el-row>
                    </div>
                    <ul class="classItems"><!--  班级列表 -->
                        <li  ref="bj" v-for="(i,index) in classes" @click="classSelected(index)" style="border-bottom:solid 1px #313131;" >
                            <div>
                                <el-row >
                                    <el-col :span="7">{{i.num}}</el-col>
                                    <el-col :span="12">{{i.name}}</el-col>
                                </el-row>
                            </div>
                        </li>
                          <div  style="border-bottom:solid 1px #494949;text-align:center;padding:5px 0 0px 0"><!--    管理班级按钮 -->
                             <div @click="showAddclass" style="cursor:pointer;border-bottom:solid 1px #313131;padding-bottom:5px; color:#ccc">
                                 <span style="font-size:1.5vw;font-weight:bolder;pdding:0 0 0 0;">+</span>
                                 <span style="pdding:0 0 0 0;">管理班级</span>
                             </div>
                         </div>
                    </ul>
                </el-col>

                <!--中栏-->
                <el-col :span="6" class="m">
                    <div class="mTop"></div>
                    <el-row class="publish" ><!--发布作业按钮-->
                        <el-col :span="10" style="text-align:right;cursor:pointer"><img  src="../assets/p.png" @click="showPublish"></el-col>
                        <el-col :span="12" style="font-size:1.5vw;padding:0.2vw 0 0 0.4vw;color:#3e3a39;cursor:pointer"><span class="pActive" @click="showPublish" >发布作业</span></el-col>
                    </el-row>

                    <div >
                    <div ref="zxc" v-for="(t,index) in tasks" class="tasks" @click="selected(index)" onMouseOver="this.className='Off'"  onmouseout="this.className='Up'">
                        <el-row class="taskItems">
                            <el-col :span="4" class="taskNum">1</el-col>
                            <el-col :span="18" class="taskName">{{t.tName}}</el-col>
                            <el-col :span="1" class="taskOp">1</el-col>
                        </el-row>
                        <div class="deadLine">
                            <span>
                                发布：{{t.pDate}}
                            </span>
                            <span>
                                截止：{{t.dDate}}
                            </span>
                        </div>
                    </div>
                    </div>
                    </el-col>

                <!--右栏-->
                <el-col :span="12" class="r">
                    <div class="rTop">

                    </div>
                    <div class="tData">
                        <p>数据</p>
                        <el-row>
                            <el-col :span="8">
                                <div class="tDate-l">
                                <div style="font-size:12px">附件:{{fileName_}}</div>
                                <div style="font-size:12px">截至：{{endTime}}</div>
                                <div class="teamUp" >
                                    <el-row>

                                        <el-col :span="4">
                                            <img v-if="ok" src="../assets/groupPale.png">
                                            <img v-else src="../assets/group.png">
                                            </el-col>
                                        <el-col :span="16" >
                                            <p ref="teamUpColor" v-if="ok" @click="ifShowTeam" style="color:#565656;cursor:pointer">发起组队</p>
                                            <p v-else @click="showC=!showC"  style="color:#c1bfbf;cursor:pointer">取消组队</p>
                                            </el-col>
                                    </el-row>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="16">
                                <div></div>
                                <el-row class="colorsDeclare">
                                    <el-col :span="8">
                                        <el-row>
                                            <el-col :span="8">
                                                <div style="width:2vw;height:1.1vw;background:#018e3c"></div>
                                            </el-col>
                                            <el-col :span="16">
                                                <div style="font-size:1vw;color:#018e3c">已交作业</div>
                                            </el-col>
                                        </el-row>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-row>
                                            <el-col :span="8">
                                                <div style="width:2vw;height:1.1vw;background:#dd8b02"></div>
                                            </el-col>
                                            <el-col :span="16">
                                                <div style="font-size:1vw;color:#dd8b02">迟交作业</div>
                                            </el-col>
                                        </el-row>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-row>
                                            <el-col :span="8">
                                                <div style="width:2vw;height:1.1vw;background:#e70012"></div>
                                            </el-col>
                                            <el-col :span="16">
                                                <div style="font-size:1vw;color:#e70012">未交作业</div>
                                            </el-col>
                                        </el-row>
                                    </el-col>
                                </el-row >
                            </el-col>
                        </el-row>
                    </div>
                    <div class="classMembers">
                        <el-row class="tab">
                            <el-col :span="12" class="tab2"   v-for="(tab,index) in tabs" >
                                <div @click="tabsSwitch(index,tab.view)" v-bind:class="{active: active == index}">{{tab.title}}</div>
                            </el-col>
                            <!--<el-col :span="12" class="tab2">
                                <div>小组作业</div>
                            </el-col>-->
                    </el-row>
                        <div style="margin:1vw 0 0 0;padding:0 auto">
                            <transition name="component-fade" mode="out-in">
                                <component :is="currentView" ref="tabs" :stus="stus_1" :teamArr1="teamArr1"></component>
                            </transition>
                        </div>
                    <el-row class="classify"  >
                        <el-col :span="14">
                            <div class="Btn_download" style="text-align: left;">
                                <span @click="downloadAll()" style="cursor:pointer;font-size: 85%;">全部下载</span>
                            </div>
                        </el-col>
                        <el-col :span="3" v-for="(tab2,index) in tabs2">
                            <div @click="tabsSwitch2(index)" v-bind:class="{active2: active2 == index}">{{tab2.title}}</div>
                        </el-col>
                    </el-row>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
  import{mapState} from'vuex'
 import axios from 'axios'
     export default {
         data(){
             return{
                workName_downloadAll:'',
                course_downloadAll:'',
                showC:false,
                showModal:false,
                ok:true,
                ifTeam:'1',
                teacherName:localStorage.userName,
                currentView: 'tIndv',
                showP:0,
                showA:0,
                active:0,
                active2:0,
                value:"",
                value2:"",
                courseMess:[],
                publishMess:[],
                stus_1:[],
                courseTeam_0:"",
                endTime:"",
                fileName_:"",
                pickerOptions1:{
                    disabledDate(time){
                        return time.getTime() > Date.now();
                    },
                    shortcuts:[
                        {
                            text:"jintian",
                            onClick(picker){
                                picker.$emit('pick', new Date());
                            }
                        },
                        ],
                },
//                options: [
////                    {
////                    value: '选项1',
////                    label: '黄金糕'
////                    },
////                     {
////                    value: '选项2',
////                    label: '双皮奶'
////                    },
////                    {
////                    value: '选项3',
////                    label: '蚵仔煎'
////                    },
////                    {
////                    value: '选项4',
////                    label: '龙须面'
////                    },
////                    {
////                    value: '选项5',
////                    label: '北京烤鸭'
////                    }
//                    ],
                tabs2:[
                    {
                        title:"全部",
                    },
                    {
                        title:"未交",
                    },
                    {
                        title:"迟交",
                    }
                    ],
                tabs:[
                     {
                          title: '个人作业',
                          view: 'tIndv'
                         },
                     {
                         active: false,
                         title: '团队作业',
                         view: 'tTeam'

                         }
                 ],
                classes:[],
                tasks:[],
                teamArr1:[]
             }
         },

       created : async function () {
             console.log("created")
             if(localStorage.itRoot==2||localStorage.itRoot==3||localStorage.itRoot==1){

             }else{
             this.$message({
                type: 'warning',
                message: '请登录。'
            });
            this.$router.push({path:'/'});
         }
         var _this = this;
         var userID = localStorage.userID;
         var params = new URLSearchParams();
         params.append('userID',userID);
         let config = { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } };
         await axios.post('/course/getCourse',params,config).then(function (res) {
            console.log(res.data);
            for(var i=0;i<res.data.Arr.length;i++){
                _this.publishMess.push(res.data.Arr[i].course);
                _this.courseMess.push(res.data.Arr[i].course);
                var clMess={};
                var index = 0
            //    clMess.num = res.data.Arr[i].course.replace(/[^a-zA-Z]/g,'');
            //    clMess.name = res.data.Arr[i].course.replace(/[a-zA-Z]/g,'');
                for(var j=res.data.Arr[i].course.length-1;j>=0;j--){
                    if('A'>res.data.Arr[i].course.charAt(j)||res.data.Arr[i].course.charAt(j)>'Z'){
                        index=j+1;
                        break;
                    }
                }
                clMess.num = res.data.Arr[i].course.substring(index,res.data.Arr[i].course.length);
                clMess.name = res.data.Arr[i].course.substring(0,index);
                clMess.isTeam= res.data.Arr[i].isTeam;
                _this.classes.push(clMess);
            }
            //目标为了子组件可以渲染出来
            _this.courseMess.splice(0,0,"123");
            _this.publishMess.splice(0,0,"456");

         }).catch(function (err) {
           console.log(err);
         });
       },
          computed:{
              ...mapState({
              clickArr : state => state.clickArr,
          })
         },
        watch:{
             "courseName":function () {
              console.log(courseName)
 }},

         methods:{
            //下载全部作业
            downloadAll(){
                var workName = this.workName_downloadAll
                var course = this.course_downloadAll
                if(workName==''){
                    this.$message({
                        message:'请选择需要下载的作业',
                        type:'warning'
                    });
                    return
                }
                window.open('/publish/downloadAll/'+workName+'/'+course,'_self')
             },
           //老师允许组队
             ifShowTeam(){
               var _this = this;
               var course_team =this.courseTeam_0;
               console.log(course_team);
               var params = new URLSearchParams();
               params.append('course',course_team);
               let config = { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } };
               axios.post('/course/changeTeam',params,config).then(function (res) {
                 console.log(res.data);
//                 for (var i=0; i<res.data.Arr.length; i++) {
//                 }

                 })
               this.$message({
                 message:'您已经对该班级启动了组队功能',
                 type:'success'
               });
               console.log(this.ok)
               this.ok=!this.ok;
             },
             unShowTeam(){
               var _this = this;
               var course_team =this.courseTeam_0;
               console.log(course_team);
               var params = new URLSearchParams();
               params.append('course',course_team);
               let config = { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } };
               axios.post('/course/changeTeam',params,config).then(function (res) {
                 console.log(res.data);
//                 for (var i=0; i<res.data.Arr.length; i++) {
//                 }

               })
                 this.ok=!this.ok;
                 this.showC=false;
                  this.$message('您已经取消了该班级的组队');
                 console.log(this.ok,this.showC)
             },

             logout(){

               this.$router.push({path:'/'});
               localStorage.removeItem("userID");
               localStorage.removeItem("userName");
             },
             selected(index){
                var _this = this;
                this.workName_downloadAll = this.tasks[index].tName;
                this.course_downloadAll = this.tasks[index].course;
                this.endTime=this.tasks[index].dDate;
                this.fileName_=this.tasks[index].accessory.substring(this.tasks[index].accessory.lastIndexOf("/")+1,this.tasks[index].accessory.length);
                var course_t = this.tasks[index].course;
                var workName = this.tasks[index].tName;
                var params = new URLSearchParams();
                params.append('course',course_t);
                params.append('workName',workName);
                let config = { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } };
                if(this.tasks[index].isTeam==1){
                    //个人作业
                    this.active = 0;
                    this.currentView = 'tIndv';
                    axios.post('/studentWork/getStuWork',params,config).then(function (res) {
                        
                        var task_2= new Array;
                        console.log("获取学生作业",res.data);
                        for(var i=0;i<res.data.stuArr.length;i++){
                            var stuMess = {};
                            stuMess.num = res.data.stuArr[i].studentID;
                            stuMess.name= res.data.stuArr[i].name;
                            stuMess.task = res.data.stuArr[i].workName;
                            stuMess.score = res.data.stuArr[i].score;
                            stuMess.evaluate = res.data.stuArr[i].evaluate;
                            stuMess.workStatus = res.data.stuArr[i].workStatus;
                            stuMess.accessory = res.data.stuArr[i].accessory;
                            stuMess.course = res.data.stuArr[i].course;
                            task_2.push(stuMess);
                        }
                        _this.stus_1= task_2;
                }).catch(function (err) {
                    console.log(err);
                });
                }else if(this.tasks[index].isTeam==2){
                    //团队作业
                    this.active = 1;
                    this.currentView = 'tTeam';
                    axios.post('/teamWork/getWork_tea',params,config).then(function (res) {
                        
                        console.log("获取团队作业",res.data);
                        var teamArr2 = new Array()
                        for(var i=0;i<res.data.document.length;i++){
                            var teamMess={}
                            teamMess.name=res.data.document[i].teamName;
                            teamMess.course=res.data.document[i].course;
                            teamMess.task=res.data.team[i].workName;
                            teamMess.score=res.data.team[i].score;
                            teamMess.evaluate=res.data.team[i].evaluate;
                            teamMess.workStatus = res.data.team[i].workStatus;
                            teamMess.menber=res.data.menber[i];
                            teamMess.num=res.data.menber[i].length;
                            teamArr2.push(teamMess)
                        } 
                        _this.teamArr1 = teamArr2
                }).catch(function (err) {
                    console.log(err);
                });
                }

                if(this.$refs.zxc[index].style.backgroundColor=="rgb(235, 235, 235)"){
                    this.$refs.zxc[index].style.backgroundColor="white";
                    console.log(this.$refs.zxc[index].style.backgroundColor)
                }
                this.active2=0;
             },
             classSelected(index){
               var _this = this;
               var course_t = this.classes[index].name+this.classes[index].num;
               this.courseTeam_0 = course_t;
               if(this.classes[index].isTeam){
                 this.ok=false;
               }else{
                 this.ok=true;
               }
               this.$refs.tabs.cleanData()
               var params = new URLSearchParams();
               params.append('course',course_t);
               let config = { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } };
               axios.post('/publish/getpublish',params,config).then(function (res) {
                   var task_1= new Array;
                 console.log(res.data);
                 for(var i=0;i<res.data.oPublish.length;i++){
                   var clMess_l={};
                   clMess_l.tName=res.data.oPublish[i].workName;
                   clMess_l.pDate=res.data.oPublish[i].startTime.substring(0,10);
                   clMess_l.dDate=res.data.oPublish[i].endTime.substring(0,10);
                   clMess_l.course=res.data.oPublish[i].course;
                   clMess_l.accessory=res.data.oPublish[i].accessory;
                   clMess_l.isTeam=res.data.oPublish[i].isTeam;
                   task_1.push(clMess_l);
                 }
                   _this.tasks = task_1;
               }).catch(function (err) {
                 console.log(err);
               });
               for( var i =0;i<this.$refs.bj.length;i++){
                 this.$refs.bj[i].style.backgroundColor="#3d3d3d";
                 this.$refs.bj[i].style.color="white";
                 console.log(this.$refs.bj[i].style.backgroundColor)
               };
               if(this.$refs.bj[index].style.backgroundColor=="rgb(61, 61, 61)"){
                 this.$refs.bj[index].style.backgroundColor="#ebebeb";
                 this.$refs.bj[index].style.color="#3d3d3d";
                 console.log(this.$refs.bj[index].style.backgroundColor)
               }
             },
             tabsSwitch(i,v){
                 this.active = i;
                 this.currentView = v;
                 console.log(this.active)
             },

             showMsgFromChild(data){
                 this.showP=data;
             },
             showMsgFromChild2(data){
                 this.showA=data;
             },
             showPublish(){
                 this.showP=1;
                 console.log(this.showP)
             },
             showAddclass(){
                 this.showA=1;
                 console.log(this.showA)
             },
             tabsSwitch2(i2){
                  this.active2 = i2;
                  this.$refs.tabs.lisnTeacher(i2);
             },
             downSome(){
                console.log(this.clickArr);
             },
             listen(data){
                   console.log(data);
                   this.classes.push(data);
                   this.$refs.sspp.getcourse(data)

             },
             delete_(data){
                 console.log(this.classes);
                 console.log(data)
                 for(var i=0;i<this.classes.length;i++){
                     if(this.classes[i].num==data.ClassNum&&this.classes[i].name==data.ClassName){
                       this.classes.splice(i,1);
//                       this.$refs.
                     }
//
                 }
                    this.$refs.sspp.deletePu(data);
             }

         }

     }
</script>
<style>
    .pActive:hover{
        font-weight: bold;
    }
    ::-webkit-scrollbar {
		  width: 9px;
	}
    ::-webkit-scrollbar-track {
		  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
	}
    ::-webkit-scrollbar-thumb {
          background: rgba(0,0,0,0.1);
          border-radius: 8px
	}
    #teacher .pShow{
        display: none;
        width: 100%;
        background: green;
    }
    #teacher .aShow{
        display: none;
        width: 100%;
        background: green;
    }
    sShow{
        display: none;
    }
    input{
        margin: 0;
        padding: 0;
    }
    .Off{
        background-color: #d2d2d2;
        border-bottom: 1px solid #b0b0b0;
        }
    .Up{
        border-bottom: 1px solid #b0b0b0;
        }
    #teacher {
         background-color: #d2d2d2;
        box-shadow:5px 5px 18px rgba(0,0,0,0.4);
    }
    #teacher .container{
      background-color: #d2d2d2;
        height: 50vw;
        width: 80vw;
        margin:0 auto;
    }
    #teacher .lmr{
        margin: 0;
        padding: 0;
    }
  /*  #teacher .lmr .el-col{
        margin: 0;
        padding: 0;
    }*/
    #teacher .lmr .l{
        background: #3d3d3d;
        height: 50vw;
    }
    #teacher .lmr .m{
        position: relative;
        z-index: 1000;
        background: #ebebeb;
        height: 50vw;
        box-shadow:5px -1px 15px rgba(0,0,0,0.2);
    }
    #teacher .lmr .r{
        background: white;
        height: 50vw;
    }
     #teacher .headNInfo{
       height: 10vw;
     }
   #teacher .headNInfo .el-col{
   }
   #teacher .headNInfo img{
       height:4.2vw;
       width: 4.2vw;
       border-radius: 50% 50%;
       background: #ccc
   }
   #teacher .head{
       padding:1.5vw 0 0 1vw;
   }
   #teacher .closeP{
       top:0.8vw;
       right:1.5vw;
       width:1.2vw;
       height:1.2vw;
       position: absolute;
       cursor: pointer
   }
   #teacher #addClass .closeP{
       top:0.5vw;
       right:1.5vw;
       width:1.5vw;
       height:1.5vw;
       cursor: pointer
   }
   #teacher .publishBox .head{
       font-size: 1.5vw;
       text-align: center;
       padding:0.5vw 0 0 0;
   }
   #teacher .info{
       padding:2vw 0 0 02vw;
       color: #e5e5e5;
       font-size: 1.3vw;
   }
   #teacher .classTitle{
       padding: 0 0 0 1vw;
          border-top:solid 2px #313131;
          border-bottom:solid 2px #313131;
          color:#e5e5e5;
          height:2.9vw
   }
   #teacher .classItems{
       padding: 0;
       margin:0;
       /*background: red;*/
       list-style: none;
       color: #e5e5e5
   }
    #teacher .classItems li{
        /*background: yellow;*/
        padding: 1vw 1vw 1vw 1vw;
        margin:0;
        font-size: 1.3vw;
    }
     #teacher .classItems li:hover{
         color: black;
         background: #ccc;
     }
   #teacher .mTop{
       height: 3.5vw;
       background: #3d3d3d;
       border-left: 2px solid #323232;
       border-right: 2px solid #323232
   }
   #teacher .publish {
       padding: 1vw 0 0 0;
       color: #989898;
   }
 #teacher .publish img{
    height: 2.2vw;
    width: 2.2vw;
 }
 #teacher .publish img:hover{
     height: 2.4vw;
     width: 2.4vw;
 }
 .el-collapse-item__header{
       background: #ebebeb;
   }
   .el-collapse-item__arrow{
       display: none;
   }
   #teacher .taskNum{
       text-align: left;
       font-size: 2.0vw;
       font-weight: bold;
       padding-left: 5%;
       color:#565656;
   }
   #teacher .taskName{
       text-align: left;
       font-size: 1.4vw;
       color:#565656;
       font-weight:normal;
   }
   #teacher .tasks{
       border-bottom: 1px solid #d8d8d8;
   }
   #teacher .taskItems{
       text-align: center;
       line-height: 2.5vw;
   }
   #teacher .deadLine{
       padding: 1% 0 1% 0;
       text-align: center;
       font-size: 0.1em;
       color: #bbbbbb
   }
   #teacher .rTop{
       height: 3.5vw;
       background: #3d3d3d;
   }
   #teacher .tData p{
       font-size: 1.5vw;
       margin: 0;
       color: #3d3d3d
   }
    #teacher .tData{
        width: 88%;
        background: #ebebeb;
        margin:  1.5vw auto 0 auto;
        padding-left: 3.5%;
        padding-top: 2%;
        height: 10vw;
        box-shadow:5px -1px 15px rgba(0,0,0,0.3);
    }
    #teacher .tDate-l{
        color: #6f6f6f;
        font-size:1.1vw;
        padding:2% 0 0 2%;
    }
    #teacher .tDate-l div {
        margin-top:6%;
    }
    #teacher .teamUp p{
        padding: 0.2vw 0 0 0.2vw;
        font-size: 1.1vw;
        color:#494949;
        cursor: pointer;
    }
    #teacher .teamUp img{
        height:1.6vw;
        width: 1.6vw;
        cursor: pointer;
    }
    #teacher .colorsDeclare{
        padding-top: 6.2vw;
    }
    #teacher .classMembers{
        position: relative;
        width: 91%;
        background: #ebebeb;
        margin:  1.8vw auto 0 auto;
        height: 33vw;
        box-shadow:5px -3px 7px rgba(0,0,0,0.3);
    }
    #teacher .tab{
        width: 100%;
        margin:  -0vw auto 0 auto;
        font-size: 1.3vw;
        height:2.8vw
    }
    .active {
         width: 100%;
        text-align: center;
        padding: 0.5vw 0 0 0;
        margin: -0.5vw 0 0 0;
        height:100%;
        background: #ebebeb;
        box-shadow:5px -3px 7px rgba(0,0,0,0.3);
        z-index: 1000;
        color: black;
        line-height: 240%;
    }
    #teacher .tab2 {
        width: 50%;
        line-height: 240%;
        padding: 0vw 0 0 0;
        color: white;
        text-align: center;
        background: #4a4a4a;
        height :100%;
    }
    #teacher .classify{
        width: 38.2vw;
        height:2.2vw;
        position: absolute;
        background: #4a4a4a;
        color:white;
        bottom:0vw;
        right:0vw
    }
    #teacher .classify div{
        font-size: 95%;
        text-align: center;
        height:2.2vw;
        line-height: 2.2vw;
    }
    .active2{
        background: white;
        color: #4a4a4a;
    }
    #teacher .classMembers table td{
        padding-top: 1%;
        padding-bottom: 1%;
        text-align: center;
        border-top:solid 1px #ccc;
        border-left:solid 1px #ccc
    /*    border: 1px solid #ccc;
    */
    }
    #teacher .classMembers table thead{
        background: #e5e1e2;
        font-weight:lighter;
        font-size: 1.3vw;
        color: #3d3d3d;
    }
    #teacher .classMembers th{
        font-weight: normal;
    }
    #teacher .classMembers thead tr{
        height: 2.5vw
    }
    #teacher .classMembers table {
        font-size: 1.2vw;
        color: #5b5b5b;
    }
    #teacher .tableDiv{
        /*height:25vw*/
    /*    width: 96%;
    */
    }
    #teacher .publishBox{
        color:#434343;
        z-index: 1001;
        top:0px;
        left: 0px;
        position: fixed;
        width: 100%;
        height: 51vw
    }
    #teacher .publishBackground{
        height: 52vw;
        width: 100%;
        background: rgba(0,0,0,0.6);
    }
    #teacher .publishcontainer{
        width: 28%;
        background: #eeeeee;
        position: fixed;
        top: 20%;
        left:50%;
        margin-left: -14%;
        height: 14vw;
    }
    #teacher #publish,#addClass .publishcontainer .head{
        padding: 0 0 0 0;
        margin: 0;
        width: 100%;
        height: 10vw;
        background: #434343;
        text-align: center;
        color: white;
    }
    #teacher .publishcontainer .input{
        overflow: hidden;
        width: 14vw;
        border:0;
        border-bottom: 1px solid #989898;
        margin-top: 1vw;
        margin-left: 7vw;
        text-align: center;
    }
    #teacher .el-input{
        font-size: 1vw;
        text-align: center;
    }
    .el-input__inner{
        height: 1.8vw;
        padding: 0 0 0 0.5vw;
    }
    .el-select .el-input__inner{
        padding-right: 0px;
    }
    .el-select{
        width: 8vw;
    }
    .el-date-editor.el-input{
        width: 8vw;
    }
    .el-input__prefix{
        display: none
    }.el-input--prefix .el-input__inner{
        padding: 0 0 0 0.5vw;
    }
    .pButton .el-button{
        position: absolute;
        bottom: 1vw;
        right: 10%;
        padding: 1% 1%;
        font-size:1.2vw;
    }
    #teacher .Btn_download{
        padding:0 0 0 10%;
        cursor: pointer;
    }
    .teamUpColor{
        color:#494949;
    }
.el-button--primary{
    border:none;
}
.component-fade-enter-active, .component-fade-leave-active {
  transition: opacity .2s ease;
}
.component-fade-enter, .component-fade-leave-to
/* .component-fade-leave-active for below version 2.1.8 */ {
  opacity: 0;
}
#teacher .modal_3{
    position: relative;
    margin: 0 auto;
    left:45%;
}
#teacher .teamUpConfirmContainer{
       background:white;
       width: 25vw;
       border-radius: 0.6vw;
       margin: 16vw auto 0 auto;
       padding: 0vw 0 vw 0px 01vw;
   }
   #teacher .teamUpConfirm{
       position: fixed;
       background:rgba(0,0,0,0.5);
       width: 100%;
       height: 100%;
       z-index: 1001;
       top: 0;
       left: 0;
   }
    .fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>
